<template>
<h3>侦听器</h3>
  <p ref="ppp" class="ppp">{{message}}</p>
  <button ref="app" @click="update" id="app">修改数据</button>
  <button @click="getElementByDom" style="font-family: 宋体">获取元素</button>
  <input ref="input" type="text">
</template>

<script>
export default {
  name: "Listener",
  data(){
    return{
      message:"Listener"
    }
  },
  methods:{
    update(){
      this.message="world"
    },
    getElementByDom(){
      console.log(this.$refs.ppp)
      console.log(this.$refs.app)
      console.log(this.$refs.input.value)//获取元素值
    }
  },
  watch:{
    message(newV,oldV){
      console.log(newV,oldV)//可以监听到数据的变化
    }
  }
}
/**
 * 内容改变：{{}}
 * 属性改变：v-bind或者：
 * 事件：v-on
 * 假如需要操作dom：
 */
</script>
<!--让当前样式只在当前组件生效-->
<style scoped>

</style>
